<template>
	<div class="">
		<van-nav-bar left-text="印量统计" left-arrow @click-left="onClickLeft" style="color: #0580FF;" />
		<div class="detail">
			<div class="" style="margin:24px 0px  15px 0px;">
				<van-row>
					<van-col span="18" class="flex">
						<div class="" style="width: 7px;height: 20px;background-color: #0580FF;margin-right: 11px;">
						</div>
						<div class="f-15 f-bold c-0 flex-align"
							style="font-size: 15px;font-weight: bold;color: #000000;font-family: auto">
							<span>营收明细</span>
						</div>
					</van-col>
				</van-row>
			</div>
			<div class="" style="background: #FFFFFF;border-radius: 5px;">
				<div class="bg-f" style="padding: 15px 10px 15px 10px;margin-bottom: 15px;">
					<div class="flex-space" style="margin-bottom: 5px;">
						<div class="" style="width: 102px;height: 30px; ">
						</div>
						<div id="">
							<div class="flex-c"
								style="width: 102px;height: 30px;background: #0580FF;border-radius: 5px 5px 0px 0px;position: relative;font-size: 13px;font-weight: 500;font-family: auto;">
								印量(张)
							</div>
							<div class="kailong"
								style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #0580FF;margin: auto;">
							</div>
						</div>
						<div id="">
							<div class="flex-c c-ffffff f-500 f-13"
								style="width: 102px;height: 30px;background: #15C78B;border-radius: 5px 5px 0px 0px;font-size: 13px;font-weight: 500;font-family: auto;">
								金额(元)
							</div>
							<div class="kailong"
								style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #15C78B;margin: auto;">
							</div>
						</div>

					</div>

					<div class="flex-space " v-for="(item,index) in GetDetailList" :key="index"
						style="margin-bottom: 5px;">
						<div class="flex-c f-500 f-13 c-0"
							style="width: 102px;height: 30px;background-color: #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
							{{item.spuname}}
						</div>
						<div class="flex-c f-500 f-13 c-0"
							style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
							{{item.printQuantity}}
						</div>
						<div class="flex-c f-500 f-13 c-0"
							style="width: 102px;height: 30px;border: 1px solid #F1F1F1;font-size: 13px;font-weight: 500;font-family: auto;">
							{{item.amount}}
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		GetDetail
	} from '@/api/statistics/GetDetail.js'
	export default {
		data() {
			return {
				userId: '',
				username: '',
				terminalId: '',
				GetDetailList: [] //数据
			}
		},
		created() {
			this.GetDetail()
		},
		methods: {
			onClickLeft() {
				// this.$router.go(-1)
				this.$router.push({
					path: '/statistics',
					query: {
						staticDetails: true,
					}
				})
			},
			GetDetail() {
				this.userId = this.$route.query.userId; //年月
				this.username = this.$route.query.username;
				this.terminalId = this.$route.query.terminalId;
				GetDetail({
					"postdata": [{
							"field": "terminalId",
							"value": this.terminalId
						},
						{
							"field": "queryType",
							"value": this.userId
						}

					]
				}).then(res => {
					this.GetDetailList = res.data;
					console.log(res, 'res')
				})
			}
		}
	}
</script>

<style>
	.detail {
		margin: 0px 15px;
		height: 100vh;
	}

	.van-nav-bar .van-icon {
		/* color: #1989fa; */
		color: #000000;
		font-size: 15px;
		 
	}

	.van-nav-bar__left span {
		font-size: 15px;
		font-weight: bold;
		color: #000000;
		font-family: auto
	}
</style>
